<!--
    group: 渠道信息
    name: 确认合同
    url: /registerProcess/confirmContract
-->
<template>
  <div class="box">
    <!--  主体部分  -->
    <div class="main_content">
      <div class="header_top">
        <h3>确认合同内容</h3>
        <a-button type="primary" @click="back">返回</a-button>
      </div>
      <a-divider />

      <a-spin tip="Loading..." :spinning="spinning">
        <div class="title" style='justify-content: center;'>
<!--          <iframe
            width="100%"
            height="700px"
            v-if="pdfUrl"
            :src="pdfUrl + '#toolbar=0'"
            type="application/x-google-chrome-pdf"
            frameborder="0"
            scrolling="no">
          </iframe>
          <a-empty v-else :description="false" />-->
          <div class="pdf-body" :key="index" v-for="(item, index) in pdfUrlList">
            <!-- <pdfBox :url="item" :id="'pdfBox'+index"></pdfBox> -->
            <!-- style='border: 1px solid #ccc;height: 600px' -->
            <p-PreviewShow :model="'page'" :event="()=>{}" :url='item' :isShowWatermark="true" :config="{title:'',visible: false, loading: false, width: '50vw',height: '60vh' }"></p-PreviewShow>
          </div>
        </div>
      </a-spin>
      <div class='box-footer'>
        <div class="footer" v-if="isFooter">
          <p>如果您对合同内容有异义，请<a @click="contactService">联系客服</a></p>
          <a-button v-if="show" class="primaryLine">合同内容已确认</a-button>
          <a-button type="primary" :disabled="show" @click="sendContract">签署合同</a-button>
        </div>
      </div>
    </div>

    <!--签署合同--签约方式-->
    <a-modal v-model="visible" :footer="null" @ok="handleOk">
      <h4>请选择签约方式</h4>
      <div class="sign_theme">
        <p>
          <a-button type="primary" @click="onlineSigning">线上签约</a-button>
          电子合同，一键签约，方便快捷！
        </p>
        <p>
          <a-button class="line" @click="offlineSigning">线下签约</a-button>
          纸质合同，需下载打印盖章后回寄。
        </p>
      </div>
    </a-modal>

    <!--签署合同--签约方式--线上签约-->
    <a-modal v-model="onlineVisible" :footer="null" @ok="handleClose">
      <h4>电子签约</h4>
      <div v-if="juridicalShow">
        <a-form-model ref="form" :model="form" :rules="rules"
                      :label-col="labelCol" :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="法人手机号">
            {{ form.newphone }}
          </a-form-model-item>
          <a-form-model-item required prop="captcha" label="填写验证码">
            <a-input v-model="form.captcha" size="large" style="max-width: 230px;" type="text" placeholder="验证码" autocomplete="off">
              <a-icon slot="prefix" type="mail" :style="{ color: '#022EA0' }"/>
            </a-input>
            <a-button type="primary" v-if='sign == 1' @click="send" size="large" style="margin-left:20px;" :disabled="disabledCodeBtn">{{codeText}}</a-button>
            <template v-else>
              <!--protocolType  1-总包   2-分包-->
              <template v-if='protocolType==1'>
                <a-button type="primary" v-if="agreeSceneCode == 'DOC_30'" @click="send" size="large" style="margin-left:20px;" :disabled="disabledCodeBtn">{{codeText}}</a-button>
                <a-button type="primary" v-else @click="generalContractorSend" size="large" style="margin-left:20px;" :disabled="disabledCodeBtn">{{codeText}}</a-button>
              </template>
              <a-button type="primary" v-else-if='protocolType==2' @click="send" size="large" style="margin-left:20px;" :disabled="disabledCodeBtn">{{codeText}}</a-button>
            </template>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 18, offset: 6 }">
            <a-button type="primary" v-if='sign == 1' @click="sureSigning">确认签约</a-button>
            <template v-else>
              <!--protocolType  1-总包   2-分包-->
              <template v-if='protocolType==1'>
                <a-button v-if="agreeSceneCode == 'DOC_30'" type="primary" @click="sureSigning">确认签约</a-button>
                <a-button v-else type="primary" @click="generalContractorSureSigning">确认签约</a-button>
              </template>
              <a-button v-else-if='protocolType==2' type="primary" @click="sureSigning">确认签约</a-button>
            </template>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div v-if="!juridicalShow" class="personTips">
        <p>请先完成企业法人身份验证及手机实名认证！</p>
        <a-button type="primary" @click="verifyNow">立即验证</a-button>
      </div>
    </a-modal>

    <!--联系客服-->
    <a-modal v-model="customerVisible" title="在线客服" :footer="null" :closable="false">
      <div class="code">
        <img :src="customGlobal.customerService" alt="客服">
      </div>
    </a-modal>

  </div>
</template>

<script>
import {
  querySignSMS,
  queryCheckSMS,
  queryLoginChannel,
  getContractDetails,
  getContractUpdate,
  getTemplatePlus,
  checkSSQRegister,
  getSendSignCatalogVCode, getDistCatalogSignCert
} from '@/api/enterprise'

export default {
  name: "confirmContract",
  // components: { pdfBox },
  data(){
    return{
      pdfUrl: '',
      pdfUrlList:[],
      protocolType: null,  //1-总包   2-分包
      agreeSceneCode: null,
      catalogName:null,
      visible: false,  //签约方式
      onlineVisible: false,  //线上签约
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      form: {
        phone: '',
        newphone: '',
        captcha: ''
      },
      codeText: '获取验证码',
      disabledCodeBtn: false,
      rules:{
        captcha: [
          { required: true, message: '请输入验证码!' },
          { validator: this.validateEn }
        ]
      },
      show: false,   //合同内容已确认展示
      cloudDetail: {},     //云平台合同详情
      cloudAgreeId: null,     //云平台合同id
      spinning: false,

      customerVisible: false,   //客服
      isFooter: false,  //底部是否展示按钮
      juridicalShow: true,   //区分签约验证与法人认证


      agreeId: null,   //合同列表传过来的合同id
      sign: null,   //来源  ''-首页  1合同列表
    }
  },
  mounted() {
    if (this.$route.query.sign){
      this.agreeId = this.$route.query.agreeId;
      this.sign = this.$route.query.sign;
      this.protocolType = this.$route.query.protocolType;
      this.agreeSceneCode = this.$route.query.agreeSceneCode;
    }
    this.getMobileNumber();
  },
  methods:{
    //联系客服
    contactService(){
      this.customerVisible = true;
    },
    //签署合同
    sendContract(){
      this.visible = true;
    },
    handleOk(){
      this.visible = false;
    },
    //线上签约
    onlineSigning(){
      let signId = this.cloudDetail.signId;
      checkSSQRegister(signId).then(res => {
        if (res.success) {
          //请求成功继续签约
          this.onlineVisible = true;
          this.visible = false;
          this.juridicalShow = true;
          //type   1电子  2纸质
          this.selectSigningType(1);
        }else{
          if (res.message == '未完成法人身份认证'){
            this.onlineVisible = true;
            this.visible = false;
            this.juridicalShow = false;
          }else{
            this.$message.warning(res.message);
          }
        }
      })
    },
    handleClose(){
      this.onlineVisible = false;
    },
    //法人身份---立即验证
    verifyNow(){
      this.$router.push({
        path: '/registerProcess/registerProcess'
      })
    },
    //分包发送验证码
    send(){
      //请求接口
      let params = this.form.phone;
      // params.transCode = '1001';
      // params.phone= this.form.phone;
      querySignSMS(params).then(res => {
        if (res.success) {
          this.$message.success('发送成功');
          this.countDown(60);
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //总包发送验证码
    generalContractorSend(){
      let params = {};
      params.catalogName = this.catalogName;
      params.sendTarget = this.form.phone;
      // console.log(111,params)
      getSendSignCatalogVCode(params).then(res => {
        if (res.success) {
          this.$message.success('发送成功');
          this.countDown(60);
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //分包确认签约
    sureSigning(){
      this.$refs['form'].validateField(['captcha'], (Error) => {
        if (!Error){
          let code = this.form.captcha;
          let phone = this.form.phone;
          queryCheckSMS(code,phone).then(res => {
            if (res.success) {
              this.spinning = true;
              this.show = true;
              this.onlineVisible = false;
              this.getCantentDetails();   //执行签署完成
            }else{
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    //总包确认签署
    generalContractorSureSigning(){
      this.$refs['form'].validateField(['captcha'], (Error) => {
        if (!Error){
          let params={};
          params.catalogName = this.catalogName;
          params.sendTarget = this.form.phone;
          params.vcode = this.form.captcha;
            getDistCatalogSignCert(params).then(res => {
              if (res.success) {
                this.spinning = true;
                this.show = true;
                this.onlineVisible = false;
                this.getCantentDetails();   //执行签署完成
              }else{
                this.$message.warning(res.message)
              }
            })
        }
      })
    },
    //签署成功后获取详情
    getCantentDetails(){
      let params = {};

      if (this.sign == 1){
        params.agreeInfoId = this.agreeId;
      }else{
        params.agreeInfoId = this.cloudAgreeId;
      }
      getTemplatePlus(params).then(res => {
        if (res.success) {
          this.$message.success('签署完成');
          this.getMobileNumber();   //获取详情
          this.spinning = false;
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //线下签约
    offlineSigning(){
      //type 1电子  2纸质
      this.selectSigningType(2);
      let params = {};
      if (this.sign == 1){
        params.sign = 1;
        params.zxyAgreeId = this.agreeId;
      }else{
        params.zxyAgreeId = this.cloudAgreeId;
      }
      params.protocolType = this.protocolType;
      params.agreeSceneCode = this.agreeSceneCode;

      this.$router.push({
        path: '/registerProcess/downloadContract',
        query: params
      })
    },
    //返回
    back(){
      if (this.sign == 1){
        this.$router.push({
          path: '/infoManagement/infoManagementDetails',
          query: {
            pagetab: 6   //跳转我的合同页签
          }
        })
      }else {
        this.$router.push({
          path: '/index/index'
        })
      }
    },
    //获取手机号，url
    getMobileNumber(){
      let urlPdfList = [];
      queryLoginChannel().then(res => {
        if (res.success) {
          if (res.result){
            let data = res.result;
            this.protocolType = data.agreeInfoVo.protocolType;   //1-总包  2-分包
            this.agreeSceneCode = data.agreeInfoVo.agreeSceneCode;

            if (this.agreeId){
              this.contractDetail(this.agreeId);  //调用合同详情
            }else{
              if (data.agreeInfoVo){
                //总包
                if(data.agreeInfoVo.protocolType == 1){
                  //总包 && agreeSceneCode == 'DOC_30' 走分包接口
                  if(data.agreeInfoVo.agreeSceneCode == 'DOC_30'){
                    this.pdfUrl = data.agreeInfoVo.agreeUrl;
                    urlPdfList.push(this.pdfUrl);
                    this.pdfUrlList = urlPdfList;
                  }else{
                    this.catalogName = data.agreeInfoVo.catalogName;
                    this.pdfUrlList = data.agreeInfoVo.catalogUrl;
                  }
                  //分包
                }else if(data.agreeInfoVo.protocolType == 2){
                  this.pdfUrl = data.agreeInfoVo.agreeUrl;
                  // this.pdfUrlList.push(this.pdfUrl);
                  urlPdfList.push(this.pdfUrl);
                  this.pdfUrlList = urlPdfList;
                }

                //data.agreeInfoVo.cloudAgreeId   云平台合同id
                this.cloudAgreeId = data.agreeInfoVo.cloudAgreeId;

                //判断合同是否是待签约
                if (data.agreeInfoVo.status == 6){
                  this.isFooter = true;
                }
                //判断合同是否是已签署状态
                // if (data.agreeInfoVo.status == 8){
                //   this.show = true;
                // }else{
                //   this.show = false;
                // }
                this.contractDetail(this.cloudAgreeId);  //调用合同详情
                // console.log(data.agreeInfoVo.cloudAgreeId)
              }
            }

            if (data.channelLegalVo && data.channelLegalVo.phone){
              let phone = data.channelLegalVo.phone;
              this.form.newphone = phone.substr(0,3) + '****' + phone.substr(7);
              this.form.phone = phone;
            }
          }
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //选择签署类型
    selectSigningType(type){
      //type  1电子  2纸质
      let params = {};
      params = this.cloudDetail;
      params.agreeType = type;
      params.transCode = 300107;
      getContractUpdate(params).then(res => {
        if (res.success) {

        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //获取详情
    contractDetail(id){
      let urlPdfList = [];
      getContractDetails(id).then(res => {
        if (res.success) {
          if (res.result) {
            this.cloudDetail = res.result;

            if (this.agreeId){
              //判断合同是否是待签约
              if (this.cloudDetail.status == 1){
                this.isFooter = true;
              }
              this.pdfUrl = this.cloudDetail.agreeUrl;
              // this.pdfUrlList.push(this.pdfUrl);
              urlPdfList.push(this.pdfUrl);
              this.pdfUrlList = urlPdfList;
            }
          }
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //校验验证码
    validateEn(rule, value, callback){
      let reg = /^[0-9]+$/
      // 长度为6到18个字符
      if (value !== '' && !reg.test(value)) {
        callback('验证码格式不正确,只能为纯数字!')
      } else if (value !== '' && value.length != 6) {
        callback('长度为6位纯数字!')
      } else {
        callback()
      }
    },
    // 倒计时方法
    countDown(time) {
      if (time === 0) {
        this.disabledCodeBtn = false;
        this.codeText = "重新获取";
        return;
      } else {
        this.disabledCodeBtn = true;
        this.codeText = "再次获取" + time + "s";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
  },
}
</script>

<style scoped lang="less">
.main_content {
  padding: 10px 24px 120px;
}
.header_top{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h3{
  font-size: 30px;
}
h4{
  font-size: 20px;
}
.pdf-body {
  height: 700px;
  width: 50%;
}
.box{
  width: 100%;
  background: #FFFFFF;
  padding: 0 10%;
}

.title{
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 300px;
  overflow-y: scroll;
  border-radius: 2px;
  border: 1px solid #4167E8;
}
a{
  text-decoration: underline;
}
.box-footer{
  position: fixed;
  background: #fff;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 185px 20px;
  border-top: 1px solid #ccc;
  box-shadow: 0px 0px 8px rgba(0,0,0,.3);
  -moz-box-shadow: 0px 0px 8px rgba(0,0,0,.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,.3);
}
.footer{
  margin-top: 20px;
  display: flex;
  justify-content: right;
  align-items: flex-end;
  p{
    margin-bottom: 0;
    margin-right: 20px;
  }
  button:nth-child(2){
    margin-right: 20px;
  }
}




//弹窗
.sign_theme{
  width: 100%;
  margin-top: 20px;
  p{
    display: flex;
    align-items: center;
    button{
      margin-right: 15px;
    }
  }
}

/deep/.ant-form-item-children{
  display: flex;
  align-items: center;
  justify-content: space-between;
}


//客服
.code{
  display: flex;
  justify-content: center;
  align-items: center;
}

//法人认证
.personTips{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  p{
    width: 100%;
    font-size: 16px;
    color: @color-smudge;
    text-align: center;
    margin: 50px 0;
  }
}


</style>
